<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组搜索案例</title>
</head>

<body>
    <input type="text" id="inpSearch" placeholder="搜索课程">
    <ul id="dataList">
        <span>-- 暂无数据 ---</span>

    </ul>
    <div id="data" style="display: none;">
        [{"id": "1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477"},{"id": "2","course":"WEB前端工程师就业班之深度JS DOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477"},{"id": "3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477"},{"id": "4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477"},{"id": "5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477"},{"id": "6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477"},{"id": "7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477"}]
    </div>
</body>
<script type="text/javascript">
;(function(doc){
    var data = JSON.parse(doc.getElementById('data').innerHTML),
    inpSearch = doc.getElementById('inpSearch'),
    dataList = doc.getElementById('dataList');

    var init = function(){
        bindEvent();
    }

    function bindEvent(){
        inpSearch.addEventListener("input",searchCourse,false);
    }
    
    function searchData(data,keyWord){
        var res = data.reduce(function (prev,elem){
            if(elem.course.indexOf(keyWord)!=-1){
                prev.push(elem);
            }
            return prev;
        },[])
        return res;
    }

    function searchCourse(){
        var val = this.value,
        len=val.length;
        if(len>0){
            console.log(makeList(searchData(data,val)));
            if(makeList(searchData(data,val))){
                dataList.innerHTML=makeList(searchData(data,val))
            }else{
                dataList.innerHTML=' <span>-- 暂无数据 ---</span>';
            }
        }else{
                dataList.innerHTML=' <span>-- 暂无数据 ---</span>';
            }
    } 
    function makeList(data){
        var list=""
        if(!data || data.length<=0){
            return false;
        }
        data.forEach(elem => {
            list+='<li>'+elem.course+'</li>'
        });
        return list;
    }
    init();

}(document));
</script>
</html>